$(function () {
    var form = layui.form;
    var layer = layui.layer;
    var laypage = layui.laypage;
    // 获取到数据类别
    var q = {
        pagenum: 1,
        pagesize: 2,
        cate_id: '',
        state: ''
    };
    initList();

    function initList() {
        $.ajax({
            type: "GET",
            url: "/my/article/list",
            data: q,
            success: function (res) {
                // console.log(res);
                var htmlStr = template('tpl_list', res);
                $("tbody").html(htmlStr);
                renderPage(res.total);
                console.log(res)
            }
        });
    };
    //template中用来美化时间的一个过滤函数
    template.defaults.imports.dataFormat = function (data) {
        const date = new Date(data);
        var y = date.getFullYear();
        var m = padZero(date.getMonth() + 1);
        var d = padZero(date.getDate());

        var hh = padZero(date.getHours());
        var mm = padZero(date.getMinutes());
        var ss = padZero(date.getSeconds());
        return y + '-' + m + '-' + d + ' ' + hh + ':' + mm + ':' + ss;
    }
    // 定义补零的函数
    function padZero(n) {
        return n > 9 ? n : '0' + n
    }
    // 定义加载文章分类的方法
    initCate()

    function initCate() {
        $.get("/my/article/cates/",
            function (res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layer.msg('初始化文章分类失败！')
                }
                // 调用模板引擎，渲染分类的下拉菜单
                var htmlStr = template('tpl_selec', res)
                $('[name=cate_id]').html(htmlStr)
                // 一定要记得调用 form.render() 方法
                form.render();
            },
        );
    };
    // 筛选列表事件
    $('#form-search').on('submit', function (e) {
        e.preventDefault();
        q.cate_id = $('[name=cate_id]').val();
        q.state = $('[name=state]').val();
        initList();
    })
    // 实现分页的功能，分页也是利用总数据÷去每页显示数据，构成分页页数


    function renderPage(total) {
        // console.log(total);
        //执行一个laypage实例
        laypage.render({
            elem: 'page_box' //注意，这里的 test1 是 ID，不用加 # 号
                ,
            count: total, //数据总数，从服务端得到
            limit: q.pagesize,
            curr: q.pagenum,
            jump: function (obj, first) {
                // console.log(obj);
                q.pagenum = obj.curr;
                // console.log(first);
                if (!first) {
                    initList();
                }
            }
        });
    };
    //删除文章的请求
    // deletAricle();

    function deletAricle(id) {
        $.get("/my/article/delete/" + id,
            function (res) {
                // console.log(res)
                initList();
            },
        );
    }
    // 给删除按钮绑定删除事件
    $('tbody').on('click', '.btn-delet', function () {
        let id = $(this).attr('data-Id');
        layer.open({
            title: '删除提示',
            content: '确认删除吗？',
            btn: ['确认', '取消'],
            btn1: function () {
                deletAricle(id);
            }
        })
    });
    // 点击编辑按钮能够重新编辑文章！
    // 点击编辑按钮跳转到提示框提醒是否跳转到文章编辑。
    // 如果跳转到文本编辑中，就将这些内容重新渲染到对应文本当中，重新修改后重新渲染数据。
    // getAricle(id);

    function getAricle(id) {
        $.get("/my/article/" + id,
            function (res) {
                console.log(res)
                var data = res.data
                // initList();
                // console.log('article_pub.html?' + 'Id=' + data.id + '&' +'title='+ data.title + '&' +'content='+ data.content)
                location.href = 'article_pub.html?';

            },
        );
    }
    // 编辑完成请求上传。
    $('tbody').on('click', '#btn-edit', function () {
        let id = $(this).attr('data-Id');
        layer.open({
            title: '编辑提示',
            content: '确认重新编辑这篇文章吗？',
            btn: ['确认', '取消'],
            btn1: function () {
                getAricle(id);
            }
        })
    })
})